<template>
  <div class="container">
    <!-- 页面标题 -->
    <div class="page-title">
      <h1>节点企业管理</h1>
    </div>

    <div class="content-wrapper">
      <!-- 左侧企业管理区域 -->
      <div class="left-section">
        <!-- 搜索卡片 -->
        <el-card class="search-card" shadow="hover">
          <el-form :inline="true" :model="form" class="search-form">
            <el-form-item label="名称">
              <el-input v-model="form.name" placeholder="节点企业名称" />
            </el-form-item>
            <el-form-item label="类型">
              <el-select v-model="form.type" placeholder="--企业类型--">
                <el-option label="养殖企业" value="1" />
                <el-option label="屠宰企业" value="2" />
                <el-option label="批发商" value="3" />
                <el-option label="零售商" value="4" />
              </el-select>
            </el-form-item>
            <el-form-item label="所属省">
              <el-select
                v-model="form.province"
                placeholder="--所属省--"
                filterable
                allow-create
                clearable
              >
                <el-option label="山东" value="山东" />
                <el-option label="浙江" value="浙江" />
                <el-option label="湖南" value="湖南" />
              </el-select>
            </el-form-item>
            <el-form-item label="所属市">
              <el-select v-model="form.city" placeholder="--所属市--">
                <el-option label="济南" value="济南" />
                <el-option label="杭州" value="杭州" />
                <el-option label="长沙" value="长沙" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="danger" class="mr-2" @click="resetForm"
                >清空</el-button
              >
              <el-button type="primary" class="mr-2" @click="pageQuery"
                >查询</el-button
              >
              <el-button type="success" @click="showAddDialog">新建</el-button>
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 表格卡片 -->
        <el-card class="table-card" shadow="hover">
          <el-table :data="enterpriseData" border class="enterprise-table">
            <el-table-column prop="nodeId" label="编号" width="80" />
            <el-table-column prop="name" label="企业名称" />
            <el-table-column prop="type" label="企业类型" width="120">
              <template #default="scope">
                <span v-if="scope.row.type === 1">养殖企业</span>
                <span v-else-if="scope.row.type === 2">屠宰企业</span>
                <span v-else-if="scope.row.type === 3">批发商</span>
                <span v-else-if="scope.row.type === 4">零售商</span>
                <span v-else>{{ scope.row.type }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="provName" label="所属省" width="100" />
            <el-table-column prop="cityName" label="所属市" width="100" />
            <el-table-column label="操作" width="200">
              <template #default="scope">
                <el-button type="text" class="text-primary" @click="showDetailDialog(scope.row)">详情</el-button>
                <el-button type="text" class="text-warning" @click="showEditDialog(scope.row)">编辑</el-button>
                <el-button type="text" class="text-danger" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="pagination-container">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageInfo.currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageInfo.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageInfo.total"
            />
          </div>
        </el-card>
      </div>

      <!-- 右侧图表区域 -->
      <div class="right-section">
        <!-- 企业注册数量趋势图 -->
        <el-card class="chart-card" shadow="hover">
          <div class="card-header">企业注册数量趋势</div>
          <div ref="trendChartRef" class="chart" />
        </el-card>

        <!-- 省分组注册数量分布饼图 -->
        <el-card class="chart-card" shadow="hover">
          <div class="card-header">省分组注册数量分布</div>
          <div ref="provincePieChartRef" class="chart" />
        </el-card>

        <!-- 企业类型分组注册数量分布饼图 -->
        <el-card class="chart-card" shadow="hover">
          <div class="card-header">企业类型分组注册数量分布</div>
          <div ref="typePieChartRef" class="chart" />
        </el-card>

       
        
      </div>
    </div>

    <!-- 添加企业对话框 -->
    <el-dialog
      v-model="addDialogVisible"
      :title="dialogTitle"
      width="600px"
      @close="handleAddDialogClose"
    >
      <el-form
        :model="newEnterprise"
        :rules="enterpriseRules"
        ref="enterpriseFormRef"
        label-width="120px"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="登录编码" prop="code">
              <el-input
                v-model="newEnterprise.code"
                placeholder="请输入登录编码"
                :disabled="dialogType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登录密码" prop="password">
              <el-input
                v-model="newEnterprise.password"
                type="password"
                placeholder="请输入登录密码"
                :disabled="dialogType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="企业名称" prop="name">
              <el-input
                v-model="newEnterprise.name"
                placeholder="请输入企业名称"
                :disabled="dialogType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业类型" prop="type">
              <el-select
                v-model="newEnterprise.type"
                placeholder="请选择企业类型"
                style="width: 100%"
                :disabled="dialogType === 'detail'"
              >
                <el-option label="养殖企业" value="1" />
                <el-option label="屠宰企业" value="2" />
                <el-option label="批发商" value="3" />
                <el-option label="零售商" value="4" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所在省" prop="prov_name">
              <el-select
                v-model="newEnterprise.provName"
                placeholder="请选择所在省"
                filterable
                allow-create
                clearable
                style="width: 100%"
                :disabled="dialogType === 'detail'"
              >
                <el-option label="山东" value="山东" />
                <el-option label="浙江" value="浙江" />
                <el-option label="湖南" value="湖南" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在市" prop="city_name">
              <el-select
                v-model="newEnterprise.cityName"
                placeholder="请选择所在市"
                filterable
                allow-create
                clearable
                style="width: 100%"
                :disabled="dialogType === 'detail'"
              >
                <el-option label="济南" value="济南" />
                <el-option label="杭州" value="杭州" />
                <el-option label="长沙" value="长沙" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="企业地址" prop="address">
          <el-input
            v-model="newEnterprise.address"
            placeholder="请输入企业地址"
            :disabled="dialogType === 'detail'"
          />
        </el-form-item>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="营业执照代码" prop="business_id">
              <el-input
                v-model="newEnterprise.businessId"
                placeholder="请输入营业执照代码"
                :disabled="dialogType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法定代表人" prop="corporation">
              <el-input
                v-model="newEnterprise.corporation"
                placeholder="请输入法定代表人"
                :disabled="dialogType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系电话" prop="telephone">
              <el-input
                v-model="newEnterprise.telephone"
                placeholder="请输入联系电话"
                :disabled="dialogType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册日期" prop="reg_date">
              <el-date-picker
                v-model="newEnterprise.regDate"
                type="date"
                placeholder="请选择注册日期"
                style="width: 100%"
                value-format="YYYY-MM-DD"
                :disabled="dialogType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 条件性显示的证件字段 -->
        <el-form-item
          v-if="newEnterprise.type === '1'"
          label="动物防疫条件"
          prop="ep_id"
        >
          <el-input
            v-model="newEnterprise.epId"
            placeholder="请输入动物防疫条件合格证编号"
            :disabled="dialogType === 'detail'"
          />
        </el-form-item>

        <el-form-item
          v-if="newEnterprise.type === '1' || newEnterprise.type === '2'"
          label="环境影响评价资质"
          prop="eia_id"
        >
          <el-input
            v-model="newEnterprise.eiaId"
            placeholder="请输入环境影响评价资质证书编号"
            :disabled="dialogType === 'detail'"
          />
        </el-form-item>

        <el-form-item
          v-if="newEnterprise.type === '3'"
          label="食品流通许可"
          prop="cir_id"
        >
          <el-input
            v-model="newEnterprise.cirId"
            placeholder="请输入食品流通许可证编号"
            :disabled="dialogType === 'detail'"
          />
        </el-form-item>

        <el-form-item
          v-if="newEnterprise.type === '3' || newEnterprise.type === '4'"
          label="食品经营许可"
          prop="fb_id"
        >
          <el-input
            v-model="newEnterprise.fbId"
            placeholder="请输入食品经营许可证编号"
            :disabled="dialogType === 'detail'"
          />
        </el-form-item>

        <el-form-item label="备注" prop="remarks">
          <el-input
            v-model="newEnterprise.remarks"
            type="textarea"
            placeholder="请输入备注"
            :rows="2"
            :disabled="dialogType === 'detail'"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button v-if="dialogType === 'add'" type="primary" @click="submitEnterprise">确定</el-button>
          <el-button v-if="dialogType === 'edit'" type="primary" @click="updateEnterprise">更新</el-button>
          <el-button v-if="dialogType === 'detail'" @click="addDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import * as echarts from "echarts";
import { 
  getEnterpriseListService, 
  addEnterpriseService,
  deleteEnterpriseService,
  getEnterpriseTrendService,
  getEnterpriseProvinceDistributionService,
  getEnterpriseTypeDistributionService
} from "@/api/admin.js";
import { ElMessage, ElMessageBox } from "element-plus";

const form = ref({
  name: "",
  type: "",
  province: "",
  city: "",
});

const enterpriseData = ref([]);

// 分页信息
const pageInfo = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
});

// 添加企业对话框相关
const addDialogVisible = ref(false);
const enterpriseFormRef = ref(null);

// 新企业表单数据
const newEnterprise = ref({
  code: "",
  password: "",
  name: "",
  type: "",
  provName: "",
  cityName: "",
  address: "",
  businessId: "",
  epId: "", // 动物防疫条件合格证编号（养殖节点必填）
  eiaId: "", // 环境影响评价资质证书编号（养殖、屠宰节点必填）
  cirId: "", // 食品流通许可证编号（批发商必填）
  fbId: "", // 食品经营许可证编号（批发商、零售商必填）
  corporation: "",
  telephone: "",
  regDate: "",
  remarks: "",
});

// 表单验证规则
const enterpriseRules = {
  code: [{ required: true, message: "请输入登录编码", trigger: "blur" }],
  password: [{ required: true, message: "请输入登录密码", trigger: "blur" }],
  name: [{ required: true, message: "请输入企业名称", trigger: "blur" }],
  type: [{ required: true, message: "请选择企业类型", trigger: "change" }],
  provName: [{ required: true, message: "请选择所在省", trigger: "change" }],
  cityName: [{ required: true, message: "请选择所在市", trigger: "change" }],
  address: [{ required: true, message: "请输入企业地址", trigger: "blur" }],
  businessId: [
    { required: true, message: "请输入营业执照代码", trigger: "blur" },
  ],
  corporation: [
    { required: true, message: "请输入法定代表人", trigger: "blur" },
  ],
  telephone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
};

// 对话框类型(add-新增, edit-编辑, detail-详情)
const dialogType = ref('add')

// 计算对话框标题
const dialogTitle = computed(() => {
  switch (dialogType.value) {
    case 'add': return '添加节点企业'
    case 'edit': return '编辑节点企业'
    case 'detail': return '节点企业详情'
    default: return '节点企业管理'
  }
})

// 分页大小改变时的回调
const handleSizeChange = (val) => {
  pageInfo.pageSize = val;
  pageInfo.currentPage = 1; // 重置到第一页
  pageQuery();
};

// 当前页改变时的回调
const handleCurrentChange = (val) => {
  pageInfo.currentPage = val;
  pageQuery();
};

// 重置表单
const resetForm = () => {
  form.value = {
    name: "",
    type: "",
    province: "",
    city: "",
  };
};

// 分页查询方法
const pageQuery = async () => {
  try {
    const params = {
      ...form.value,
      pageNum: pageInfo.currentPage,
      pageSize: pageInfo.pageSize,
    };

    // 这里应该调用实际的API接口
    const response = await getEnterpriseListService(params);

    if (response.code === 0) {
      enterpriseData.value = response.data.rows;
      pageInfo.total = response.data.total;
    } else {
      ElMessage.error(response.message || "查询失败");
    }
  } catch (error) {
    ElMessage.error("查询出错");
    console.error(error);
  }
};

// 显示添加对话框
const showAddDialog = () => {
  addDialogVisible.value = true;
};

// 显示详情对话框
const showDetailDialog = (row) => {
  dialogType.value = 'detail'
  // 将选中行的数据填充到表单
  populateEnterpriseData(row)
  addDialogVisible.value = true
}

// 显示编辑对话框
const showEditDialog = (row) => {
  dialogType.value = 'edit'
  // 将选中行的数据填充到表单
  populateEnterpriseData(row)
  addDialogVisible.value = true
}

// 填充企业数据到表单
const populateEnterpriseData = (row) => {
  newEnterprise.value = {
    nodeId: row.nodeId || '',
    code: row.code || '',
    password: '',
    name: row.name || '',
    type: row.type ? String(row.type) : '',
    provName: row.provName || '',
    cityName: row.cityName || '',
    address: row.address || '',
    businessId: row.businessId || '',
    epId: row.epId || '',
    eiaId: row.eiaId || '',
    cirId: row.cirId || '',
    fbId: row.fbId || '',
    corporation: row.corporation || '',
    telephone: row.telephone || '',
    regDate: row.regDate || '',
    remarks: row.remarks || '',
  }
}

// 关闭添加对话框时的处理
const handleAddDialogClose = () => {
  // 重置表单
  enterpriseFormRef.value.resetFields();
  // 重置表单数据
  newEnterprise.value = {
    code: "",
    password: "",
    name: "",
    type: "",
    provName: "",
    cityName: "",
    address: "",
    businessId: "",
    epId: "",
    eiaId: "",
    cirId: "",
    fbId: "",
    corporation: "",
    telephone: "",
    regDate: "",
    remarks: "",
  };
  // 重置对话框类型
  dialogType.value = 'add'
};

// 提交企业信息
const submitEnterprise = () => {
  enterpriseFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        // 调用API接口保存数据
        const response = await addEnterpriseService(newEnterprise.value);
        if (response.code === 0) {
          ElMessage.success("企业信息添加成功");
          addDialogVisible.value = false;
          pageQuery(); // 重新查询数据
        } else {
          ElMessage.error(response.message || "添加失败");
        }
      } catch (error) {
        /*  ElMessage.error("添加失败"); */
        console.error(error);
      }
    }
  });
};

import {updateEnterpriseService} from '@/api/admin.js'
// 更新企业信息
// 更新企业信息
const updateEnterprise = () => {
  enterpriseFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        // 调用API接口更新数据
        const response = await updateEnterpriseService(newEnterprise.value);
        if (response.code === 0) {
          ElMessage.success("企业信息更新成功");
          addDialogVisible.value = false;
          pageQuery(); // 重新查询数据
        } else {
          ElMessage.error(response.message || "更新失败");
        }
      } catch (error) {
        ElMessage.error("更新失败");
        console.error(error);
      }
    }
  });
}

// 删除企业信息
const handleDelete = (row) => {
  ElMessageBox.confirm('确定要删除该企业信息吗？此操作不可恢复。', '删除确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    try {
      const response = await deleteEnterpriseService(row.nodeId);
      if (response.code === 0) {
        ElMessage.success("删除成功");
        pageQuery(); // 重新查询数据
      } else {
        ElMessage.error(response.message || "删除失败");
      }
    } catch (error) {
      ElMessage.error("删除失败");
      console.error(error);
    }
  }).catch(() => {
    ElMessage.info("已取消删除");
  });
}

const trendChartRef = ref(null);
const provincePieChartRef = ref(null);
const typePieChartRef = ref(null);
const provinceBarChartRef = ref(null);

// 初始化所有图表
const initCharts = async () => {
  // 初始化企业注册数量趋势图
  await initTrendChart();
  
  // 初始化省分组注册数量分布饼图
  await initProvincePieChart();
  
  // 初始化企业类型分组注册数量分布饼图
  await initTypePieChart();
};

// 初始化企业注册数量趋势图
const initTrendChart = async () => {
  try {
    // 从后端获取数据
    const response = await getEnterpriseTrendService();
    
    if (response.code === 0) {
      // 根据后端返回的数据格式进行处理
      // 假设后端返回的数据格式为: {xAxisData: [...], seriesData: [...]}
      // 或者其他格式，需要根据实际返回的数据结构进行调整
      const { xAxisData, seriesData } = response.data;
      
      const trendChart = echarts.init(trendChartRef.value);
      trendChart.setOption({
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xAxisData,
        },
        yAxis: {
          type: "value",
          name: "企业数",
        },
        series: [
          {
            name: "注册数量",
            type: "line",
            smooth: true,
            data: seriesData,
            lineStyle: {
              width: 3,
            },
            itemStyle: {
              radius: 4,
            },
          },
        ],
      });
    } else {
      ElMessage.error(response.message || "获取趋势图数据失败");
    }
  } catch (error) {
    ElMessage.error("获取趋势图数据时发生错误");
    console.error(error);
  }
};

// 初始化省分组注册数量分布饼图
const initProvincePieChart = async () => {
  try {
    // 从后端获取数据
    const response = await getEnterpriseProvinceDistributionService();
    
    if (response.code === 0) {
      // 后端返回的数据格式: [{provName: "...", count: ...}, ...]
      // 需要转换为 ECharts 需要的格式: [{name: "...", value: ...}, ...]
      const chartData = response.data.map(item => ({
        name: item.provName,
        value: item.count
      }));
      
      const provincePieChart = echarts.init(provincePieChartRef.value);
      provincePieChart.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: 10,
          top: "center",
        },
        series: [
          {
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: chartData,
          },
        ],
      });
    } else {
      ElMessage.error(response.message || "获取省份分布数据失败");
    }
  } catch (error) {
    ElMessage.error("获取省份分布数据时发生错误");
    console.error(error);
  }
};

// 初始化企业类型分组注册数量分布饼图
const initTypePieChart = async () => {
  try {
    // 从后端获取数据
    const response = await getEnterpriseTypeDistributionService();
    
    if (response.code === 0) {
      // 后端返回的数据格式: [{typeName: "...", count: ...}, ...]
      // 需要转换为 ECharts 需要的格式: [{name: "...", value: ...}, ...]
      const chartData = response.data.map(item => ({
        name: item.typeName,
        value: item.count
      }));
      
      const typePieChart = echarts.init(typePieChartRef.value);
      typePieChart.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: 0,
          left: "center",
        },
        series: [
          {
            type: "pie",
            radius: ["40%", "70%"],
            center: ["50%", "40%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: chartData,
          },
        ],
      });
    } else {
      ElMessage.error(response.message || "获取企业类型分布数据失败");
    }
  } catch (error) {
    ElMessage.error("获取企业类型分布数据时发生错误");
    console.error(error);
  }
};

onMounted(() => {
  pageQuery(); // 初始化加载数据
  initCharts(); // 初始化所有图表

  // 响应窗口大小变化，重绘图表
  window.addEventListener("resize", () => {
    if (trendChartRef.value) {
      const trendChart = echarts.init(trendChartRef.value);
      trendChart.resize();
    }
    if (provincePieChartRef.value) {
      const provincePieChart = echarts.init(provincePieChartRef.value);
      provincePieChart.resize();
    }
    if (typePieChartRef.value) {
      const typePieChart = echarts.init(typePieChartRef.value);
      typePieChart.resize();
    }
    if (provinceBarChartRef.value) {
      const provinceBarChart = echarts.init(provinceBarChartRef.value);
      provinceBarChart.resize();
    }
  });
});
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 120vh;
  box-sizing: border-box;
}

.page-title {
  margin-bottom: 20px;
}

.page-title h1 {
  font-size: 20px;
  color: #1f2329;
  margin: 0;
  font-weight: 600;
}

.content-wrapper {
  display: flex;
  gap: 20px;
  width: 100%;
}

.left-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.right-section {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 20px;
}

/* 卡片样式 */
.search-card,
.table-card,
.chart-card {
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.search-card:hover,
.table-card:hover,
.chart-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* 搜索表单样式 */
.search-form {
  width: 100%;
  padding: 15px 0;
}

.el-form-item {
  margin-bottom: 10px;
}

.el-form-item__label {
  font-weight: 500;
}

/* 表格样式 */
.table-card {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.enterprise-table {
  flex: 1;
  width: 100%;
}

/* 分页样式 */
.pagination-container {
  padding: 15px 0;
  display: flex;
  justify-content: center;
}

/* 图表卡片样式 */
.chart-card {
  display: flex;
  flex-direction: column;
}

.card-header {
  font-size: 14px;
  font-weight: 500;
  color: #1f2329;
  padding: 12px 15px;
  border-bottom: 1px solid #f2f3f5;
}

.chart {
  flex: 1;
  width: 100%;
  min-height: 200px;
  padding: 10px;
  box-sizing: border-box;
}

/* 按钮间距 */
.mr-2 {
  margin-right: 8px !important;
}

/* 操作按钮颜色 */
.text-primary {
  color: #409eff !important;
}

.text-warning {
  color: #e6a23c !important;
}

.text-danger {
  color: #f56c6c !important;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .content-wrapper {
    flex-direction: column;
  }

  .right-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .search-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .el-form-item {
    width: 100%;
  }

  .el-form-item__content {
    width: 100%;
  }
}
</style>
